<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - eBusiness</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/slider.js}"></script>
</head>
<body>
    <div th:replace="~{common/header :: header}"></div>

    <div class="slider-container">
        <div class="slides">
            <img th:src="@{/images/1.jpg}" alt="Slide 1" class="slide active">
            <img th:src="@{/images/2.png}" alt="Slide 2" class="slide">
            <img th:src="@{/images/3.png}" alt="Slide 3" class="slide">
        </div>
        <div class="navigation-arrows">
            <span class="prev-arrow">&#10094;</span>
            <span class="next-arrow">&#10095;</span>
        </div>
        <div class="pagination-dots">
            <span class="dot active" data-slide="0"></span>
            <span class="dot" data-slide="1"></span>
            <span class="dot" data-slide="2"></span>
        </div>
    </div>

    <div class="category-search-bar-container">
        <div class="main-nav">
            <ul>
                <li><a th:href="@{/index}">首页</a></li>
                <li th:each="type : ${goodsTypes}"><a th:href="@{/category(typeId=${type.id})}" th:text="${type.typename}"></a></li>
            </ul>
        </div>
        <div class="header-search">
            <form th:action="@{/search}" method="get">
                <input type="text" name="keyword" placeholder="请输入关键词" th:value="${keyword}">
                <button type="submit">搜索</button>
            </form>
        </div>
    </div>

    <div class="main-content">
        <div class="user-info-container">
            <div class="user-info-header">
                <h2>用户注册</h2>
            </div>
            <form th:action="@{/register}" method="post">
                <p th:if="${error}" class="form-message error" th:text="${error}"></p>
                <p th:if="${message}" class="form-message success" th:text="${message}"></p>

                <div class="form-group">
                    <label for="bemail">邮箱</label>
                    <input type="email" id="bemail" name="bemail" required class="form-control" placeholder="请输入您的邮箱">
                </div>

                <div class="form-group">
                    <label for="bpwd">密码</label>
                    <input type="password" id="bpwd" name="bpwd" required class="form-control" placeholder="请输入您的密码">
                </div>

                <div class="form-group">
                    <label for="confirm_bpwd">确认密码</label>
                    <input type="password" id="confirm_bpwd" name="confirm_bpwd" required class="form-control" placeholder="请输入您的密码" onkeyup="validatePassword();">
                </div>
                <p id="password_match_error" class="form-message error"></p>

                <div class="form-actions">
                    <button type="submit" id="register_button" class="btn btn-success" disabled>注册</button>
                    <button type="reset" class="btn btn-secondary">重置</button>
                </div>
            </form>
        </div>
    </div>

    <div th:replace="~{common/footer :: footer}"></div>

    <script>
        function validatePassword() {
            var password = document.getElementById("bpwd").value;
            var confirm_password = document.getElementById("confirm_bpwd").value;
            var error_message_element = document.getElementById("password_match_error");
            var register_button = document.getElementById("register_button");

            if (password !== confirm_password) {
                error_message_element.textContent = "两次输入的密码不一致！";
                register_button.disabled = true;
            } else {
                error_message_element.textContent = "";
                register_button.disabled = false;
            }
        }
    </script>
</body>
</html> 